//模态框显示，隐藏的两种方式
//1.通过给标签添加属性
//显示  data-bs-toggle="modal"   data-bs-target="#addModal"
//隐藏 data-bs-dismiss="modal" 
//2.通过 jquery插件，js代码实现显示与隐藏
// 显示$('选择器').modal('show')
//隐藏 $('选择器').modal('hide')



//获取dom元素
const tbody = document.querySelector('tbody')
const provinceEle = document.querySelector('[name=province]')
const cityEle = document.querySelector('[name=city]')
const countyEle = document.querySelector('[name=county]')
const form = document.querySelector('.add-form')
const addBtn = document.querySelector('.addbtn')
//渲染学生信息表
async function getStudent() {

    const result = await axios({
        url: '/student/list'
    })
    tbody.innerHTML = result.data.data.reduce((b, { id, name, age, sex, group, phone, salary, truesalary, province, city, county }) => {
        return b + `<tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${age}</td>
        <td>${sex}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
        <button  type="button" class="btn btn-primary btn-sm update" data-id="${id}">修改</button>
        <button  type="button" class="btn btn-danger btn-sm del" data-id="${id}">删除</button>
        </td>
    </tr>`}, '')
}
getStudent()

//初始化 省 市 区 数据
async function init() {
    //省份数据
    getSelectData('/geo/province', {}, '省', provinceEle)
}
init()

//封装一个统一的省市区数据改变的渲染函数
//url 请求的地址
//params 请求携带的参数
//text 下拉框的默认值
//target 需要渲染到的标签里
async function getSelectData(url, params, text, target) {
    const result = await axios({ url, params, })
    console.log(result);
    target.innerHTML = result.data.reduce((b, v) => {
        return b + ` <option value="${v}">${v}</option>`
    }, `<option  value = ""> --${text}--</option> `)
}
//省份数据改变，市 也改变
provinceEle.addEventListener('change', async function () {
    //市份数据改变
    await getSelectData('/geo/city', { pname: provinceEle.value }, '市', cityEle)
    //重置区标签,
    countyEle.innerHTML = countyEle.firstChild.outerHTML//获取到countyEle里的第一个标签结构 相等于  <option value = ""> --县--</option> 
})
//市份数据改变，区 也改变
cityEle.addEventListener('change', async function () {
    //区的数据改变
    await getSelectData('/geo/county', { pname: provinceEle.value, cname: cityEle.value }, '县', countyEle)
})
//给form表单绑定提交事件
form.addEventListener('submit', async function (e) {
    e.preventDefault()

    //利用form-serialize ，hash把获取到的表单内容转为对象，empty,表单内容为空也能获取到
    //判断点击的是编辑还是添加
    const title = document.querySelector('#addModalLabel')
    const data = serialize(form, { hash: true, empty: true })
    // console.log(data);
    //这里用到一个隐藏域，判断，当添加学员时，把对象里的id属性，删除
    if (title.innerHTML === '录入新学员') {
        //删除id
        delete data.id
    }
    //判断只要有一个为空，就return
    for (const key in data) {
        if (!data[key]) {
            toastr.error('请检查你的字段', '注意')
            return
        }
    }

    let result;
    //判断是录入学员，还是修改学员
    if (title.innerHTML === '录入新学员') {
        //发送请求
        result = await axios({ url: '/student/add', method: 'post', data })
    } else if (title.innerHTML === '修改学员') {
        //发送请求
        result = await axios({ url: '/student/update', method: 'put', data })
    }


    if (result.data.code === 0) {
        //取消模态框
        $('#addModal').modal('hide')
        //弹窗提示
        toastr.success(result.data.message, '恭喜')
        //渲染页面
        getStudent()
        //重置表单内容,只是给表单设置 dom.value='' 
        form.reset()
        //重置市标签
        cityEle.innerHTML = cityEle.firstChild.outerHTML
        //重置区标签
        countyEle.innerHTML = countyEle.firstChild.outerHTML
    }
})

//给添加学员绑定点击按钮
addBtn.addEventListener('click', function () {
    //弹出模态框
    $('#addModal').modal('show')
    document.querySelector('#addModalLabel').innerText = '录入新学员'
    //重置表单内容,只是给表单设置 dom.value='' 
    form.reset()
    //重置市标签
    cityEle.innerHTML = `<option  value = ""> --市--</option>`
    //重置区标签
    countyEle.innerHTML = `<option  value = ""> --区--</option>`
})
//给tbody绑定点击事件，事件委托
tbody.addEventListener('click', async function (e) {
    const target = e.target
    let id = target.dataset.id
    //点击修改
    if (target.classList.contains('update')) {
        //弹出模态框
        $('#addModal').modal('show')
        //修改标题
        document.querySelector('#addModalLabel').innerText = '修改学员'
        //通过id，发送获取学员的信息
        const result = await axios({ url: '/student/one', params: { id, } })
        const obj = result.data.data
        //获取到用户的市份数据
        await getSelectData('/geo/city', { pname: obj.province }, '市', cityEle)
        //获取到用户的区份数据
        await getSelectData('/geo/county', { pname: obj.province, cname: obj.city }, '县', countyEle)
        // console.log(obj);
        //对获取到的对象遍历，把数据添加到对应的输入框里
        for (const key in obj) {
            const input = document.querySelector(`[name=${key}]`)
            if (input && key !== 'sex') {
                input.value = obj[key]
            }
        }
        //给男 女的选项，添加到编辑器里
        document.querySelector(`[name=sex][value=${obj.sex}]`).checked = true

    }
    //点击删除
    if (target.classList.contains('del')) {
        //确定是否删除
        if (confirm('你确定要删除吗？')) {
            //发送请求
            const result = await axios({ url: '/student/delete', method: 'delete', params: { id, } })
            //如果成功，弹窗提示
            if (result.data.code === 0) {
                toastr.success(result.data.message, '恭喜')
                //渲染函数
                getStudent()
            }
        }



    }
})



